<template>
  <div class="followup-container">
    <el-card shadow="never">
      <template #header>
        <h2>慢病随访</h2>
      </template>
      
      <div class="followup-content">
        <el-table :data="followupData" stripe>
          <el-table-column prop="patientName" label="患者姓名" />
          <el-table-column prop="disease" label="疾病" />
          <el-table-column prop="lastFollowup" label="上次随访" />
          <el-table-column prop="nextFollowup" label="下次随访" />
          <el-table-column prop="status" label="状态">
            <template #default="{ row }">
              <el-tag :type="row.status === '正常' ? 'success' : 'warning'">{{ row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="handleFollowup(row)">随访</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const followupData = ref([
  {
    patientName: '张三',
    disease: '糖尿病',
    lastFollowup: '2024-01-10',
    nextFollowup: '2024-02-10',
    status: '正常'
  },
  {
    patientName: '李四',
    disease: '高血压',
    lastFollowup: '2024-01-08',
    nextFollowup: '2024-02-08',
    status: '待随访'
  }
])

const handleFollowup = (row: any) => {
  ElMessage.success(`开始随访: ${row.patientName}`)
}
</script>

<style lang="scss" scoped>
.followup-container {
  h2 {
    margin: 0;
    color: #303133;
  }
}
</style>